<template>
  <view>
    <BaseNavbar :title="title" />
    <view class="info">
      <view class="panel">
        <image class="panel_bg" src="@/pagesB/static/img/financeBg.png" />
        <view class="panel_content">
          <view class="panel_content_top flexRowBetween">
            <view>当前余额
              <BaseCountTo class="balance" :value="balance" :size="48" :decimals="2" />
              元
            </view>
            <view>已提现：{{ withdrawalBalance.toFixed(2) }}元</view>
            <!-- <BaseIcon class="rule" name="info-circle" color="#fff" /> -->
          </view>
          <view class="panel_content_bottom flexRowAllCenter">
            <view class="withdrawal" @click="goWithdrawal">立即提现</view>
            <view class="record flexRowAllCenter" @click="goWithdrawalRecord">提现记录</view>
          </view>
        </view>
      </view>
      <view class="income" v-if="vButtonPermissions">
        <view class="title">收益明细</view>
        <view class="screen flexRowBetween" v-if="false">
          <view class="flexRowAllCenter">
            <view>全部(包含下级)</view>
            <view></view>
          </view>
          <view class="total">总收益：{{ totalIncome.toFixed(2) }}元</view>
        </view>
      </view>
      <view class="subsection" @click="handleSubsection">
        <u-subsection mode="subsection" :active-color="mainColor" :list="subsectionList" :current="current"
          @change="changeSubsection" />
        <u-calendar v-model="showCalendar" mode="range" :safe-area-inset-bottom="true" btn-type="error"
          :range-color="mainColor" :active-bg-color="mainColor" :change-year="false" @change="changeCalendar">
        </u-calendar>
      </view>
    </view>
    <ComList :loading-type="loadingType">
      <FinanceListCard v-for="item in listData" :key="item.log_id" :info="item" />
    </ComList>
  </view>
</template>

<script>
import BaseCountTo from "@/components/base/BaseCountTo.vue";
import BaseIcon from "@/components/base/BaseIcon.vue";
import BaseNavbar from "@/components/base/BaseNavbar.vue";
import ComList from "@/components/list/ComList.vue";
import FinanceListCard from "../components/cards/FinanceListCard.vue";
import myPull from "@/mixins/myPull.js";
import { subtractDaysAndFormat } from "@/wxutil/times";
export default {
  components: { BaseNavbar, BaseCountTo, BaseIcon, ComList, FinanceListCard },
  data() {
    return {
      title: "财务管理",
      balance: 0,
      totalIncome: 0, //总收入
      withdrawalBalance: 0, //提现金额
      subsectionList: [
        //     {
        //     name: '昨天'
        // },
        {
          name: '今天',
          status: 1,
        },
        {
          name: '昨天',
          status: 2,
        },

        {
          name: '前天',
          status: 3,
        },
        {
          name: '本月',
          status: 4,
        },


        {
          name: '上月',
          status: 5,
        },
        {
          name: '自定义',
          isCustom: true
        }

      ],
      current: 0,
      startDate: '',
      endDate: '',
      showCalendar: false,
      mainColor: '#fa3534',
    };
  },
  methods: {
    handleSubsection() {
      if (this.current === 5 && !this.showCalendar) this.showCalendar = true
    },
    handleData(date, startDate, endDate) {
      // this.queryDate = date
      this.startDate = startDate;
      this.endDate = endDate;
      this.refresh()
    },
    changeSubsection(i) {
      this.current = i
      let selectItem = this.subsectionList[i]
      if (selectItem.isCustom) {
        this.showCalendar = true
      } else {
        let date = new Date()
        if (selectItem.status < 4) {
          this.startDate = this.endDate = subtractDaysAndFormat(selectItem.status - 1)
        } else if (selectItem.status == 4) {
          this.endDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate())
          this.startDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + 1
        } else if (selectItem.status == 5) {
          this.startDate = date.getFullYear() + '-' + (date.getMonth()) + '-' + 1
          let tiem = new Date(date.getFullYear(), date.getMonth(), 0).getDate()
          this.endDate = date.getFullYear() + '-' + (date.getMonth()) + '-' + tiem
        }

        console.log('结束时间', this.startDate, this.endDate, i, selectItem); //当前日期的年 2022
        this.handleData('', this.startDate, this.endDate)
      }
    },
    changeCalendar(e) {
      let { startDate, endDate } = e;
      this.handleData('', startDate, endDate);
    },
    goWithdrawal() {
      uni.navigateTo({ url: "/pagesB/finance/Withdrawal" });
    },
    goWithdrawalRecord() {
      uni.navigateTo({ url: "/pagesB/finance/WithdrawalRecord" });
    },
    getList(page, done) {
      let data = {
        page,
        limit: 10,
        start_time: this.startDate,
        end_time: this.endDate,
      };
      this.$u.api.getIncomeList(data).then((res) => {
        if (page == 1) {
          this.totalIncome = parseFloat(res.total_income.income) || 0;

          this.withdrawalBalance = parseFloat(res.withdrawal_balance) || 0;
          console.log("已提现金额 1 ", res.total_withdrawal.withdrawal);
          console.log("已提现金额 2 ", this.withdrawalBalance);

          this.balance = parseFloat(res?.data?.userInfo?.cash || 0);

          //更新本地保存余额start
          let vUserInfoNew = this.vUserInfo;
          vUserInfoNew.user.cash = this.balance;
          this.$u.vuex("vUserInfo", vUserInfoNew);
          //更新本地保存余额end
        }

        done(res.data.list);
      });
    },
  },
  onLoad(opt) {
    this.endDate = this.startDate = subtractDaysAndFormat(0)
    this.handleData('', this.startDate, this.endDate);

  },
  onShow(e) {
    let pages = getCurrentPages();
    let currPage = pages[pages.length - 1]; // 当前页
    if (currPage.data.isDoRefresh == true) {
      // 是否刷新
      currPage.data.isDoRefresh = false;
      this.refresh();
    }
  },
  mixins: [myPull()],
};
</script>
<style lang="scss">
page {
  background-color: $pageBgColor;
}
</style>
<style lang="scss" scoped>
.subsection{
  margin-top: 10rpx;
}
.panel_content_bottom{

  // border: 1px solid #000;
}
.info {
  padding: 30rpx;
  background-color: $uni-bg-color;

  .panel {
    position: relative;
    height: 292rpx;

    &_bg {
      width: 100%;
      height: 100%;
    }

    &_content {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      &_top {
        color: $textWhite;
        font-size: $font-size-small;
        border-bottom: 2rpx solid $textWhite;
        padding: 80rpx 70rpx 20rpx;
        position: relative;

        .balance {
          margin: 0 6rpx 0 20rpx;
        }

        .rule {
          position: absolute;
          right: 20rpx;
          top: 20rpx;
        }
      }

      &_bottom {
        color: $textWhite;
        padding: 26rpx;
        position: relative;

        .withdrawal {
          font-size: $font-size-xlarge;
        }

        .record {
          position: absolute;
          top: 30rpx;
          right: 0;
          height: 40rpx;
          width: 150rpx;
          background-color: #25c2ff;
          border-radius: 20rpx 0 0 20rpx;
          font-size: $font-size-xsmall;
        }
      }
    }
  }

  .income {
    .title {
      color: $textBlack;
      font-size: $font-size-xlarge;
      font-weight: bold;
      margin: 50rpx 0 30rpx;
    }

    .screen {
      .total {
        color: $themeComColor;
        font-size: $font-size-small;
      }
    }
  }
}
</style>
